<template>
  <div class="main_box">
    <div class="header">
      <img src="//127.0.0.1/homework/php/project01/img/user.png" alt />
      <router-link to="/user/login">
            <span>登录</span>
        <span>|</span>
        <span>注册</span>
    </router-link> 
      
    </div>
    <div class="order">
      <div>我的订单</div>
      <div>全部订单</div>
      <div class="anchor"></div>
    </div>
    <!-- nav -->
    <ul class="mui-table-view mui-grid-view mui-grid-9">
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <a href="#">
          <span class="mui-icon mui-icon-extra mui-icon-extra-card"></span>
          <div class="mui-media-body">待付款</div>
        </a>
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <a href="#">
          <span class="mui-icon mui-icon-extra mui-icon-extra-express">
            <span class="mui-badge">5</span>
          </span>
          <div class="mui-media-body">待收货</div>
        </a>
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <a href="#">
          <span class="mui-icon mui-icon-redo"></span>
          <div class="mui-media-body">退换修</div>
        </a>
      </li>
    </ul>
    <div class="options">
        <div>
            <span class="mui-icon mui-icon-extra mui-icon-extra-peoples"></span>
            <div class="options_txt">会员中心</div>
            <div class="anchor"></div>
        </div>
        <div>
            <span class="mui-icon mui-icon-extra mui-icon-extra-prech"></span>
            <div class="options_txt">我的优惠</div>
            <div class="anchor"></div>
        </div>
        <div>
            <span class="mui-icon mui-icon-extra mui-icon-extra-custom"></span>
            <div class="options_txt">在线服务</div>
            <div class="anchor"></div>
        </div>
        <div>
            <span class="mui-icon mui-icon-extra mui-icon-extra-hotel"></span>
            <div class="options_txt">小米之家</div>
            <div class="anchor"></div>
        </div>
        <div>
            <span class="mui-icon">F</span>
            <div class="options_txt">F码通道</div>
            <div class="anchor"></div>
        </div>
        <div>
            <span class="mui-icon mui-icon-gear"></span>
            <div class="options_txt">设置</div>
            <div class="anchor"></div>
        </div>
    </div>
  </div>
</template>
<script>
export default {};
</script>
<style scoped>
.options>div:nth-child(1) span{
    color: blueviolet;
}
.options>div:nth-child(2) span{
    color: rgb(192, 226, 43);
}
.options>div:nth-child(3) span{
    color: rgb(221, 52, 29);
}
.options>div:nth-child(4) span{
    color: rgb(162, 212, 22);
}
.options>div:nth-child(5) span{
    color: rgb(224, 240, 6);
}
.options>div:nth-child(6) span{
    color: blueviolet;
    font-weight: 600;
}
.options{
    width: 100%;
    height: auto;
}
.options>div{
    width: 100%;
    height: 50px;
    background-color: rgb(236, 238, 222);
    margin-top: 15px;
    line-height: 50px;
}
.options>div>span{
    margin-left: 20px;
    margin-right: 5px;
    font-size: 25px;
}
.options>div>.options_txt{
   display: inline-block;
   font-size: 14px;
   color: rgb(126, 112, 112);
}
.options>div>.anchor{
    margin-top: -28px;
}
.mui-table-view.mui-grid-view .mui-table-view-cell{
    font-size: 13px;
}
.mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-body{
    font-size:12px ;
}
.anchor {
  height: 11px;
  width: 11px;
  transform: rotate(45deg);
  position: absolute;
  right: 20px;
  margin-top: 13px;
  border: none;
  border-right: 1px solid black;
  border-top: 1px solid black;
}
.order {
  height: 40px;
  width: 100%;
  font-size: 14px;
  color: hsl(208, 7%, 47%);
  line-height: 40px;
  padding: 0 20px 0 15px;
  background-color: rgba(241, 241, 241, 0.637);
  margin-bottom: 2px;
}
.order > div:nth-child(1) {
  float: left;
}
.order > div:nth-child(2) {
  float: right;
  margin-right: 14px;
}
.header > img {
  width: 48px;
  height: 48px;
  margin-top: 20px;
  margin-left: 20px;
  display: inline-block;
  border-radius: 50%;
  border: 4px solid yellow;
}
.header > a {
  position: relative;
  bottom: 22%;
  left: 1%;
  color: blueviolet;
  font-size: 14px;
}
.header {
  width: 100%;
  height: 80px;
  background-image: url("//127.0.0.1/homework/php/project01/img/user_header.png");
  background-size: cover;
  background-color: rgb(235, 86, 17);
}
.main_box {
  height: 100%;
  width: 100%;
  margin-top: 40px;
}
</style>

   
